<template>
  <div class="site">
    <router-view />
  </div>
</template>

<style lang="scss">
@import url(/src/assets/css/global.css);
html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  font-size: 14px;
  color: #303133;
}

html,
body,
#app,
.site {
  width: 100%;
  height: 100%;
  min-width: 1080px;
}
::-webkit-scrollbar {
  display: none;
}

:focus {
  outline: none;
}
div,
ul,
li,
h1,
p,
span {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.site-input {
  height: 40px;

  .el-input__wrapper {
    width: 100%;
  }

  .el-input__wrapper.is-focus {
    // box-shadow: 0 0 0 1px var(--color-primary);
  }
}


.el-upload--picture-card {
  &:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  width: 76px;
  height: 76px;

  .noImg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
      width: 25px;
      height: 25px;
    }

    .tip {
      font-size: 12px;
      color: var(--color-primary);
      line-height: 14px;
      margin-top: 7px;
    }
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.message-box {
  width: 450px;
}

.cancelButtonClass,
.confirmButtonClass {
  width: 54px !important;
  height: 32px;
  font-size: 14px;
  line-height: 16px;
}

.cancelButtonClass,
.cancelButtonClass:hover {
  color: #5a5e66;
  background-color: #fff;
  border: 1px solid rgba(220, 223, 230, 1);
}
.confirmButtonClass,
.confirmButtonClass:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  outline: none !important;
}

.el-date-table td.current:not(.disabled) .el-date-table-cell__text {
  background-color: var(--color-primary);
}

.el-date-picker__header-label:hover,
.el-date-table td.today .el-date-table-cell__text,
.el-date-table td.available:hover,
.el-picker-panel__icon-btn:hover {
  color: var(--color-primary);
}

.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  height: 40px;
}

.register {
  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 200px;
  }
}

.user {
  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 193px;
  }
}

.qulification {
  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 300px;
  }
}

// login
.loginForm {
  .el-input__wrapper,
  .el-input__wrapper.is-focus {
    box-shadow: none;
    background: none;
    border: 0;
  }

  .el-form-item.is-error {
    .site-input {
      border: 0 !important;
    }

    .el-input__wrapper,
    .el-input__wrapper.is-focus {
      box-shadow: 0 0 0 1px var(--color-primary) inset;
      border-radius: 20px;
    }
  }
}

.el-form-item.is-error {
  .el-input__wrapper,
  .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--color-primary) inset;
  }
}

// el-checkbox
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.el-checkbox__inner:hover {
  border-color: var(--color-primary);
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--color-primary);
}

.el-radio {
  margin-right: 20px;
  height: 20px;
  line-height: 20px;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #303133;
  font-size: 12px;
}

.el-radio__inner:hover {
  border-color: var(--color-primary);
}
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

/* pagination */
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin: 30px 0;

  .el-pagination button:hover {
    color: var(--color-primary) !important;
  }
}

/* el-tabs */
.site-tabs {
  .el-tabs__header {
    margin: 24px 0 !important;

    .el-tabs__item {
      font-size: 16px;
      height: 30px;
      line-height: 20px;
      font-weight: 500;
    }
  }

  .el-tabs__nav-wrap::after {
    content: '';
    background-color: transparent !important;
  }

  .el-tabs__item.is-active,
  .el-tabs__item:hover {
    color: var(--color-primary);
  }

  .el-tabs__active-bar {
    background-color: var(--color-primary);
  }
}

/* el-dialog */
.el-dialog .el-dialog__header {
  padding: 20px 0 20px 15px !important;
}

.el-dialog .el-dialog__header span {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.el-dialog .el-dialog__body {
  padding: 0 !important;
}

.img {
  width: 100px;
  height: 100px;
  vertical-align: top;
  margin-right: 4px;
}

.el-image-viewer__canvas {
  width: 600px;
  height: 600px;
  margin: 50px auto;
}

.avatar-uploader {
  width: 80px;
  height: 80px;
}

.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 12px;
  color: #8c939d;
  width: 25px;
  height: 25px;
  text-align: center;
}

.el-dropdown-menu__item :not(.is-disabled):focus {
  background: var(--color-primary);
  color: #fff;
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background-color: var(--color-primary);
}

.el-descriptions__label.el-descriptions__cell.is-bordered-label {
  width: 100px;
}

.btns {
  .el-button {
    width: 59px;
    height: 34px;
  }
}
</style>
